<script setup lang="ts">
import HomeLogo from '@/views/home/components/HomeLogo.vue'
import HomeLeft from '@/views/home/components/HomeLeft.vue'
import HomeHeader from '@/views/home/components/HomeHeader.vue'
import { useSettingstore } from '@/stores/setting.ts'
import { nextTick, ref, watch } from 'vue'

const usesetting = useSettingstore()

const sign = ref(true)

watch(
  () => usesetting.refresh,
  () => {
    sign.value = false
    nextTick(() => {
      sign.value = true
    })
  },
)
</script>

<template>
  <div class="home_container">
    <!-- 左侧导航 -->
    <div class="home_slider" :class="{ fold: usesetting.isfold }">
      <HomeLogo></HomeLogo>
      <HomeLeft></HomeLeft>
    </div>
    <!-- 顶部菜单 -->
    <div class="home_tabbar" :class="{ fold: usesetting.isfold }">
      <HomeHeader></HomeHeader>
    </div>
    <!-- 内容展示区 -->
    <div class="home_main" :class="{ fold: usesetting.isfold }">
      <RouterView v-if="sign"></RouterView>
    </div>
  </div>
</template>

<style scoped lang="scss">
.home_container {
  width: 100%;
  height: 100vh;

  .home_slider {
    width: $base-menu-width;
    height: 100vh;
    background-color: $base-menu-backgroundColor;
    transition: all 0.5s;

    &.fold {
      width: $base-menu-width-fold;
    }
  }

  .home_tabbar {
    width: calc(100% - $base-menu-width);
    height: $base-tabber-height;
    position: fixed;
    top: 0;
    left: $base-menu-width;
    transition: all 0.5s;

    &.fold {
      left: $base-menu-width-fold;
      width: calc(100% - $base-menu-width-fold);
    }
  }

  .home_main {
    height: calc(100% - $base-tabber-height);
    width: calc(100% - $base-menu-width);
    position: absolute;
    left: $base-menu-width;
    top: $base-tabber-height;
    padding: 20px;
    overflow: auto;
    transition: all 0.5s;

    &.fold {
      left: $base-menu-width-fold;
      width: calc(100% - $base-menu-width-fold);
    }
  }
}
</style>
